<template>
  <div class="constant-list-container">
    <div class="content-wrapper">
      <h2>枚举常量管理</h2>

      <!-- 常量查询 -->
      <div class="query-section">
        <span>常量key：</span>
        <el-input
          v-model="enumConstantQueryParams.constantKey"
          class="input-field"
          placeholder="请输入"
        />
        <span>常量名称：</span>
        <el-input
          v-model="enumConstantQueryParams.constantName"
          class="input-field"
          placeholder="请输入"
        />
        <span>启用状态：</span>
        <el-radio-group v-model="enumConstantQueryParams.isEnable">
          <el-radio :value="0">启用</el-radio>
          <el-radio :value="1">未启用</el-radio>
        </el-radio-group>
        <div class="button-section">
          <el-button
            type="primary"
            :icon="Search"
            @click="searchEnumConstant(enumConstantQueryParams)"
            >搜索</el-button
          >
          <el-button
            type="success"
            :icon="Plus"
            @click="openInsertEnumConstantWindow"
            >新增</el-button
          >
        </div>
      </div>

      <!-- 集合列表 -->
      <div class="table-section">
        <el-table
          :data="paginatedEnumConstants"
          class="constant-table"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          border
        >
          <el-table-column label="ID" width="80" align="center">
            <template #default="scope">
              <el-popover
                effect="light"
                trigger="hover"
                placement="top"
                width="auto"
              >
                <template #default>
                  <div>{{ scope.row.id }}</div>
                </template>
                <template #reference>
                  <el-tag size="small">{{
                    scope.row.id.toString().substring(0, 4)
                  }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="常量key" width="180" align="center">
            <template #default="scope">
              <span>{{ scope.row.constantKey }}</span>
            </template>
          </el-table-column>
          <el-table-column label="常量名称" width="180" align="center">
            <template #default="scope">
              <span>{{ scope.row.constantName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="明细项类型" width="120" align="center">
            <template #default="scope">
              <el-tag type="success" effect="plain">
                {{ getConstantItemTypeLabel(scope.row.itemType) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            prop="description"
            label="描述"
            width="250"
            align="center"
          >
          </el-table-column>
          <el-table-column label="状态" width="100" align="center">
            <template #default="scope">
              <el-tag
                :type="scope.row.isEnable == 0 ? 'success' : 'info'"
                size="small"
              >
                {{ scope.row.isEnable == 0 ? "启用" : "未启用" }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center">
            <template #default="scope">
              <el-button
                type="info"
                size="small"
                :icon="List"
                @click="getEnumConstantItemInfo(scope.$index, scope.row)"
                >详情</el-button
              >
              <el-button
                type="warning"
                size="small"
                :icon="Edit"
                @click="updateEnumConstant(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="small"
                :icon="Delete"
                @click="deleteEnumConstant(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加分页组件 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="enumConstantCurrentPage"
            v-model:page-size="enumConstantPageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="enumConstantInfoList.length"
            @size-change="enumConstantHandleSizeChange"
            @current-change="enumConstantHandleCurrentChange"
          />
        </div>
      </div>
    </div>

    <!-- 新增常量 -->
    <el-dialog
      v-model="enumConstantInsertWindowsEnable"
      title="新增常量"
      width="650px"
      :destroy-on-close="true"
    >
      <el-form :model="enumConstantSave" label-width="100px">
        <el-form-item label="常量key" required>
          <el-input v-model="enumConstantSave.constantKey" />
        </el-form-item>
        <el-form-item label="常量名称" required>
          <el-input v-model="enumConstantSave.constantName" />
        </el-form-item>
        <el-form-item label="明细项类型" required>
          <el-select
            v-model="enumConstantSave.itemType"
            placeholder="请选择"
            style="width: 100%"
            value-key="key"
          >
            <el-option
              v-for="item in constantItemTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="enumConstantSave.description"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="enumConstantSave.isEnable">
            <el-radio :value="0">启用</el-radio>
            <el-radio :value="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="enumConstantInsertWindowsEnable = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="insertEnumConstantOnSubmit(enumConstantSave)"
            >新建</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 修改常量 -->
    <el-dialog
      v-model="enumConstantUpdateWindowsEnable"
      title="修改常量"
      :destroy-on-close="true"
    >
      <el-form :model="enumConstantupdate" label-width="100px">
        <el-form-item label="常量key" required>
          <el-input disabled v-model="enumConstantupdate.constantKey" />
        </el-form-item>
        <el-form-item label="常量名称" required>
          <el-input v-model="enumConstantupdate.constantName" />
        </el-form-item>
        <el-form-item label="明细项类型" required>
          <el-select
            v-model="enumConstantupdate.itemType"
            placeholder="请选择"
            style="width: 100%"
            value-key="key"
            disabled
          >
            <el-option
              v-for="item in constantItemTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="enumConstantupdate.description"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="enumConstantupdate.isEnable">
            <el-radio :value="0">启用</el-radio>
            <el-radio :value="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="enumConstantUpdateWindowsEnable = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="updateEnumConstantOnSubmit(enumConstantupdate)"
            >修改</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 常量明细项详情 -->
    <el-dialog
      v-model="enumConstantItemWindowsEnable"
      title="枚举常量明细项"
      :destroy-on-close="true"
    >
      <div class="constant-info">
        <el-descriptions :column="3" border>
          <el-descriptions-item label="常量key">{{
            enumConstantWindow.constantKey
          }}</el-descriptions-item>
          <el-descriptions-item label="常量名称">{{
            enumConstantWindow.constantName
          }}</el-descriptions-item>
          <el-descriptions-item label="描述">{{
            enumConstantWindow.description
          }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <div class="query-section item-query-section">
        <span>明细项key：</span>
        <el-input
          v-model="constantItemQueryParams.itemKey"
          class="input-field"
          placeholder="请输入"
        />
        <span>明细项名称：</span>
        <el-input
          v-model="constantItemQueryParams.itemName"
          class="input-field"
          placeholder="请输入"
        />
        <div class="button-section">
          <el-button
            type="primary"
            :icon="Search"
            @click="searchConstantItem(constantItemQueryParams)"
            >搜索</el-button
          >
          <el-button type="success" :icon="Plus" @click="insertConstantItem"
            >新增</el-button
          >
        </div>
      </div>

      <div class="table-section">
        <el-table
          :data="paginatedConstantItems"
          class="constant-item-table"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          border
        >
          <el-table-column label="ID" width="80" align="center">
            <template #default="scope">
              <el-popover
                effect="light"
                trigger="hover"
                placement="top"
                width="auto"
              >
                <template #default>
                  <div>{{ scope.row.id }}</div>
                </template>
                <template #reference>
                  <el-tag size="small">{{
                    scope.row.id.toString().substring(0, 4)
                  }}</el-tag>
                </template>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column label="明细项key" width="180" align="center">
            <template #default="scope">
              <span>{{ scope.row.itemKey }}</span>
            </template>
          </el-table-column>
          <el-table-column label="明细项名称" width="180" align="center">
            <template #default="scope">
              <span>{{ scope.row.itemName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="description" label="描述" align="center">
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="scope">
              <el-button
                type="warning"
                size="small"
                :icon="Edit"
                @click="updateConstantItem(scope.$index, scope.row)"
                >修改</el-button
              >
              <el-button
                type="danger"
                size="small"
                :icon="Delete"
                @click="deleteConstantItem(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 添加分页组件 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="constantItemcurrentPage"
            v-model:page-size="constantItemPageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="constantItemInfoList.length"
            @size-change="constantItemHandleSizeChange"
            @current-change="constantItemHandleCurrentChange"
          />
        </div>
      </div>
    </el-dialog>

    <!-- 新增常量明细项 -->
    <el-dialog
      v-model="insertConstantItemWindowEnable"
      title="新增常量明细项"
      width="600px"
      :destroy-on-close="true"
    >
      <el-form :model="constantItemSave" label-width="100px">
        <el-form-item label="明细项key" required>
          <el-input v-model="constantItemSave.itemKey" />
        </el-form-item>
        <el-form-item label="明细项名称" required>
          <el-input v-model="constantItemSave.itemName" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="constantItemSave.description"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="insertConstantItemWindowEnable = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="insertConstantItemOnSubmit(constantItemSave)"
            >新建</el-button
          >
        </span>
      </template>
    </el-dialog>

    <!-- 修改常量明细项 -->
    <el-dialog
      v-model="updateConstantItemWindowEnable"
      title="修改常量明细项"
      width="600px"
      :destroy-on-close="true"
    >
      <el-form :model="constantItemUpdate" label-width="100px">
        <el-form-item label="明细项key" required>
          <el-input disabled v-model="constantItemUpdate.itemKey" />
        </el-form-item>
        <el-form-item label="明细项名称" required>
          <el-input v-model="constantItemUpdate.itemName" />
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="constantItemUpdate.description"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateConstantItemWindowEnable = false"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="updateConstantItemOnSubmit(constantItemUpdate)"
            >修改</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed } from "vue";
import { Search, Edit, Delete, Plus, List } from "@element-plus/icons-vue";
import useConstantList from "@/hooks/useConstantList";
import { ElMessage } from "element-plus";
import type {
  ConstantItemQueryParams,
  ConstantItemSave,
  EnumConstantQueryParams,
  EnumConstantSave,
} from "@/types";

const {
  enumConstantInsertWindowsEnable,
  enumConstantUpdateWindowsEnable,
  enumConstantItemWindowsEnable,
  insertConstantItemWindowEnable,
  updateConstantItemWindowEnable,
  enumConstantQueryParams,
  constantItemQueryParams,
  enumConstantWindow,
  enumConstantSave,
  enumConstantupdate,
  constantItemSave,
  constantItemUpdate,
  enumConstantInfoList,
  constantItemInfoList,
  constantItemTypeOptions,
  constantItemcurrentPage,
  constantItemPageSize,
  enumConstantCurrentPage,
  enumConstantPageSize,
  getEnumConstantListByQueryParams,
  getConstantItemListByQueryParams,
  openInsertEnumConstantWindow,
  openupdateEnumConstantWindow,
  openUpdateConstantItemWindow,
  insertEnumConstantOnSubmit,
  updateEnumConstantOnSubmit,
  deleteEnumConstant,
  axiosUpdateEnumConstant,
  insertConstantItemOnSubmit,
  deleteConstantItem,
  updateConstantItemOnSubmit,
  getConstantItemTypeLabel,
  constantItemHandleCurrentChange,
  constantItemHandleSizeChange,
  enumConstantHandleSizeChange,
  enumConstantHandleCurrentChange,
} = useConstantList();

// 计算分页后的数据
const paginatedConstantItems = computed(() => {
  const start =
    (constantItemcurrentPage.value - 1) * constantItemPageSize.value;
  const end = start + constantItemPageSize.value;
  return constantItemInfoList.slice(start, end);
});

// 计算分页后的数据
const paginatedEnumConstants = computed(() => {
  const start =
    (enumConstantCurrentPage.value - 1) * enumConstantPageSize.value;
  const end = start + enumConstantPageSize.value;
  return enumConstantInfoList.slice(start, end);
});

function searchEnumConstant(queryParams: EnumConstantQueryParams) {
  console.log(queryParams);
  // 调用后端接口
  getEnumConstantListByQueryParams(queryParams).then((res) => {
    console.log("查询结果");
    console.log(res.content);
    if (Array.isArray(res.content)) {
      enumConstantInfoList.length = 0;
      Object.assign(enumConstantInfoList, res.content);
      // 重置分页
      enumConstantCurrentPage.value = 1;
    } else {
      console.log("查询结果为空");
    }
  });
}

function searchConstantItem(queryParams: ConstantItemQueryParams) {
  console.log("查询常量明细项");
  getConstantItemListByQueryParams(queryParams).then((res) => {
    console.log("查询结果");
    console.log(res.content);
    if (Array.isArray(res.content)) {
      constantItemInfoList.length = 0;
      Object.assign(constantItemInfoList, res.content);
      constantItemcurrentPage.value = 1; // 重置页码
    } else {
      console.log("查询结果为空");
    }
  });
}

function updateEnumConstant(index: number, row: EnumConstantSave) {
  console.log("修改枚举常量");
  console.log(JSON.stringify(row));
  // 对enumConstantSave赋值
  Object.assign(enumConstantupdate, row);
  console.log(JSON.stringify(enumConstantupdate));
  // todo xpx 修改弹框应重写
  console.log("修改枚举常量");
  openupdateEnumConstantWindow();
}

function updateConstantItem(index: number, row: ConstantItemSave) {
  openUpdateConstantItemWindow();
  console.log("修改常量明细项");
  console.log(JSON.stringify(row));
  Object.assign(constantItemUpdate, row);
}

function getEnumConstantItemInfo(index: number, row: EnumConstantSave) {
  console.log("获取枚举常量明细");
  console.log(JSON.stringify(row));
  Object.assign(enumConstantWindow, row);
  enumConstantItemWindowsEnable.value = true;
  constantItemSave.constantKey = row.constantKey;
  constantItemQueryParams.constantKey = row.constantKey;
  // 调用后端查询接口
  getConstantItemListByQueryParams(constantItemQueryParams).then((res) => {
    console.log("查询结果");
    console.log(res.content);
    if (Array.isArray(res.content)) {
      constantItemInfoList.length = 0;
      Object.assign(constantItemInfoList, res.content);
    } else {
      console.log("查询结果为空");
    }
  });
}

function insertConstantItem() {
  console.log("新增常量明细项");
  insertConstantItemWindowEnable.value = true;
}

onMounted(() => {
  // 挂载组件时获取列表数据
  searchEnumConstant(enumConstantQueryParams);
});
</script>

<style scoped>
.constant-list-container {
  margin: 0 auto;
  padding: 15px;
}

.content-wrapper {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.constant-list-container h2 {
  font-size: 22px;
  color: #303133;
  margin-bottom: 20px;
  border-left: 4px solid #409eff;
  padding-left: 10px;
}

.query-section {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 15px;
  background: #f5f7fa;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.item-query-section {
  margin-top: 20px;
}

.input-field {
  width: 200px;
  margin-right: 15px;
}

.button-section {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.section-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 15px;
  font-weight: 500;
}

.table-section {
  background: #fff;
  padding: 10px 0;
}

.constant-table,
.constant-item-table {
  width: 100%;
  margin-bottom: 15px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.constant-info {
  margin-bottom: 20px;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  overflow: hidden;
}

/* 弹窗样式 */
:deep(.el-dialog__header) {
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

:deep(.el-dialog__footer) {
  border-top: 1px solid #f0f0f0;
  padding-top: 15px;
}

:deep(.el-dialog__body) {
  padding: 20px 30px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}

:deep(.el-descriptions__label) {
  width: 120px;
}
</style>
